<template>
  <div class="c-w100 c-ph24 c-pv24" :style="getVerticalSpacing(marginSettings) + getHorizontalSpacing(marginSettings)" v-if="isFromM7">
    <div v-if="itemType == 1">
      <div :class="index != itemList.length - 1 ? 'c-mb24' : ''" :style="getInnerSpacing(marginSettings, 1, index != itemList.length - 1)"
        v-for="(item,index) in itemList" :key="index"
        @click="clickSubCategory(item)" v-if="index < showCount">
        <div class="c-flex-row c-bg-white c-text-hidden" :style="isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem') : ''">
          <div :class="isSetPageBackground ? 'c-mv-auto' : ''">
            <div class="c-ww240 c-text-hidden c-flex-shrink0 c-p c-bg-white" :style="(!isSetPageBackground ? getBorderRadius(borderRadius, '0.4rem') : '') + getImageRatio(imageSetting, '3 / 2')">
              <custom-img class="c-w100 c-h c-text-hidden" :imageSetting="imageSetting" :url="item.avatar || require('../../assets/defult270.png')"></custom-img>
            </div>
          </div>
          <div class="c-flex-column c-justify-sb c-pl20 c-flex-grow1" :class="isSetPageBackground ? 'c-pv20 c-pr10' : ''">
            <div class="c-fs24 c-lh36 c-hh72 c-text-ellipsis2 c-fc-xblack c-fw-b">{{item.name}}</div>
            <div class="c-flex-row c-justify-sb c-aligni-center" v-if="productType == 2">
              <span class="c-fs18 c-fc-gray c-lh">{{item.courseSecondCategory ? ("包括："+item.courseSecondCategory) : ""}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="c-w100" v-if="itemType == 2">
      <div class="c-flex-row c-flexw-wrap c-justify-sb">
        <div class="w50-12"
          :style="getInnerSpacingWidth(marginSettings, 1) + getInnerSpacing(marginSettings, 1, isSetMarginBottom(index, itemList.filter((item, index) => {return index < showCount}), 2))"
          v-for="(item,index) in itemList.filter((item, index) => {return index < showCount})"
          :class="[
            isSetMarginBottom(index, itemList.filter((item, index) => {return index < showCount}), 2) ? 'c-mb24' : '',
            index < itemList.length - 2 ? 'c-mb24' : ''
          ]" :key="index"
          @click="clickSubCategory(item)"
        >
          <div class="c-p c-text-hidden" :class="productType == 1 ? 'box-shadow7 c-bg-white' : ''" :style="getBorderRadius(borderRadius, '0.4rem')">
            <div class="c-bg-white c-p c-text-hidden" :style="getImageRatio(imageSetting, '3 / 2')">
              <custom-img class="c-w100 c-h c-text-hidden" :borderRadiusPosition="productType == 1 ? 'top' : ''" :borderRadius="borderRadius" :imageSetting="imageSetting" :url="item.avatar || require('../../assets/defult270.png')"></custom-img>
            </div>
            <div class="c-fs24 c-fc-xblack c-textAlign-c c-pv10 c-text-ellipsis1 c-ph10" v-if="productType == 1">{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="c-w100" v-if="itemType == 3">
      <div class="c-flex-row c-flexw-wrap">
        <div
          class="w33-26-3"
          :class="[
            (index + 1) % 3 != 0 ? 'c-mr26' : '',
            isSetMarginBottom(index, itemList.filter((item, index) => {return index < showCount}), 3) ? 'c-mb24' : ''
          ]"
          :style="getInnerSpacingWidth(marginSettings, 3, index) + getInnerSpacing(marginSettings, 1, isSetMarginBottom(index, itemList.filter((item, index) => {return index < showCount}), 3))"
          v-for="(item,index) in itemList.filter((item, index) => {return index < showCount})" :key="index"
          @click="clickSubCategory(item)">
          <div class="c-p c-text-hidden" :class="productType == 1 ? 'box-shadow7 c-bg-white' : ''" :style="getBorderRadius(borderRadius, '0.4rem')">
            <div class="c-bg-white c-p c-text-hidden" :style="getImageRatio(imageSetting, '3 / 2')">
              <custom-img class="c-w100 c-h c-text-hidden" :borderRadiusPosition="productType == 1 ? 'top' : ''" :borderRadius="borderRadius" :imageSetting="imageSetting" :url="item.avatar || require('../../assets/defult270.png')"></custom-img>
            </div>
            <div class="c-fs24 c-fc-xblack c-textAlign-c c-pv10 c-text-ellipsis1 c-ph10" v-if="productType == 1">{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="isShowMoreBottom && productType == 2" class="c-fs20 c-textAlign-c c-pt24 c-flex-row c-flex-center" @click="clickMore">
      <div class="c-ph20 c-pv8 theme-fc theme-bg-10 c-br50" :style="getMoreColor(headLine) + getHeadLineMore(headLine)">查看更多</div>
    </div>
  </div>
</template>

<script>
import CustomImg from '@/components/templates/customImg.vue'
import { customStyle } from '@/utils/customStyle.js'
import { goSubCategory } from "@/utils/goDetails.js"
import { appRouterChange } from "@/mixin/appRouterPush.js";
export default {
  mixins: [appRouterChange, customStyle],
  name: "CategoryItem",
  components: {CustomImg},
  props: {
    isFromM7: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    itemList: {
      type: Array,
      default: () => []
    },
    showCount: {
      type: Number,
      default: 1
    },
    isShowMoreBottom: {
      type: Boolean,
      default: false,
    },
    isShowTitle: {
      type: Boolean,
      default: false,
    },
    headLine: {
      type: Object,
      default: null
    },
    marginSettings: {
      type: Object,
      default: null
    },
    pageName: {//首页INDEX 预览页PREVIEW_INDEX 微页面MICRO_PAGE
      type: String,
      default: "INDEX"
    },
    productType: {
      type: Number,
      default: 2
    },
    imageSetting: {
      type: Object,
      default: null
    },
    borderRadius: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      categoryLevel: localStorage.getItem("categoryLevel") ? Number(localStorage.getItem("categoryLevel")) : 1,
      categoryTheme: JSON.parse(localStorage.getItem("categoryTheme")),
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
      pageTextColor: sessionStorage.getItem('pageTextColor') || '',
    };
  },
  computed: {
    // 判断是否设置一行两列的底部间距
    // index 索引值 num 2两列 3三列
    isSetMarginBottom() {
      return function (index, list, num) {
       return (index < (list.length % num != 0 ? (list.length - list.length % num) : (list.length - num))) && list.length > num
      }
    },
  },
  methods: {
    clickMore() {
      this.$emit('clickMore');
    },
    clickSubCategory(item) {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      if (this.productType == 2) {
        goSubCategory(this, this.categoryLevel, this.categoryTheme, item.level1CatId, item.level2CatId, item.level3CatId, item.name, 1);
      } else {
        localStorage.setItem("isDetail", 1);
        let toPath = `/mall/classification/classificationAll?cId=${item.id}`;
        this.iosAppRouteChange(toPath);
      }
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.w50-12 {
  width: calc(50% - 0.3rem);
}
/* (100% - 26) / 3 */
.w33-26-3 {
  width: calc(33.3% - 0.433rem);
}
.box-shadow7{
  box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.1)
}
</style>
